<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org"
      layout:decorator="layout/m_master">

<div layout:fragment="content">

    <div class="page-group">
        <div class="page page_regdata">

            <header class="head-nav-wrap">
                <div class="head-nav ">
                    <div class="nav-title">
                        完善资料
                    </div>
                    <div class="nav-left">
                        <a href="javascript:;" onclick="bottlecms.back()">
                            <i class="icon icon-bottlecms-100"></i>
                        </a>
                    </div>
                    <div class="nav-right">
                        <a href="/m/center" class="hbtn">跳过</a>
                    </div>

                </div>
            </header>
            <div class="page-content">
                <div class="bcui-step" step="2">
                    <div class="step-title ">
                        <div class="step " step="1">
                            <u></u>
                            <b>1</b>
                        </div>
                        <div class="step" step="2">
                            <u></u>
                            <b>2</b>
                        </div>
                    </div>
                    <div class="step-cons">
                        <div class="step" step="2">
                            <form action="/m/ajax/center/single/setup" bottlecms-form-ajax="" target="/m/center"
                                  id="thisform2" method="post">
                                <div class="photobox" style="text-align: center;">
                                    <div class="photo-previews"
                                         style="background-image: url(&quot;/m/img/signle_photo_example.png&quot;); background-repeat: no-repeat; background-position: center center; background-size: contain;">
                                    </div>

                                    <div style="padding: .4rem;">请上传本人真实正脸照</div>


                                    <div class="upfilebox bcui-upload-box" style="display: inline-block;">
                                        <button class="btn">上传照片</button>
                                        <input type="hidden" name="photo">
                                        <input type="file" class="photo-file"
                                               accept="image/jpeg, image/x-png, image/png, image/gif"
                                               data-function="upphoto">
                                    </div>
                                </div>
                                <div class="btnbox photosubmitbox" style="display:none;  margin-top: 1rem;">
                                    <button class="btn submit" type="submit">
                                        确认提交
                                    </button>
                                </div>
                                <div style="height:80px;"></div>
                            </form>
                        </div>


                    </div>
                </div>

                <div style="height:80px;">
                </div>
                <style>
                    .clipbox {
                        display: none;
                        position: fixed;
                        top: 0;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        height: 100%;
                        width: 100%;
                    }

                    .clipbox .clipArea {
                        user-select: none;
                        overflow: hidden;
                        position: fixed;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        top: 0;
                        height: 100%;
                        background: #000;
                    }

                    .clipbox .clipbtnbox {
                        position: absolute;
                        bottom: 30px;
                        left: 0;
                        right: 0;
                        text-align: center;
                    }
                </style>

                <div class="clipbox" style="">
                    <div class="clipArea" id="clipArea" style="user-select: none; overflow: hidden;">
                        <div class="photo-clip-layer"
                             style="position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; margin-left: -130px; margin-top: -130px;">
                            <div class="photo-clip-move-layer"
                                 style="transform-origin: 0px 0px 0px; transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(130px, 130px) scale(1) translateZ(0px); width: 520px; height: 520px;">
                                <div class="photo-clip-rotate-layer"
                                     style="transform: translateZ(0px) translate(260px, 260px) rotate(0deg);"></div>
                            </div>
                        </div>
                        <div class="photo-clip-mask"
                             style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; pointer-events: none;">
                            <div class="photo-clip-mask-left"
                                 style="position: absolute; left: 0px; right: 50%; top: 50%; bottom: 50%; width: auto; background-color: rgba(0, 0, 0, 0.5); margin-right: 130px; margin-top: -130px; margin-bottom: -130px;"></div>
                            <div class="photo-clip-mask-right"
                                 style="position: absolute; left: 50%; right: 0px; top: 50%; bottom: 50%; background-color: rgba(0, 0, 0, 0.5); margin-left: 130px; margin-top: -130px; margin-bottom: -130px;"></div>
                            <div class="photo-clip-mask-top"
                                 style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 50%; background-color: rgba(0, 0, 0, 0.5); margin-bottom: 130px;"></div>
                            <div class="photo-clip-mask-bottom"
                                 style="position: absolute; left: 0px; right: 0px; top: 50%; bottom: 0px; background-color: rgba(0, 0, 0, 0.5); margin-top: 130px;"></div>
                            <div class="photo-clip-area"
                                 style="border: 2px dashed rgb(221, 221, 221); position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; transform: translate(-50%, -50%);"></div>
                        </div>
                    </div>

                    <div class="clipbtnbox">
                        <button class="btn  btn-info " id="clipBtn">确认</button>
                        <button class="btn btn-invalid cancel">取消</button>
                    </div>
                </div>


            </div>
        </div>
    </div>


    <script id="javascript-jquery" src="./完善资料 - 婚恋交友系统-step2_files/jquery.min.js">
    </script>
    <div th:replace="layout/m_layout::systemJs"></div>
    <script id="javascript-bottlecms-popform" src="/m/js/bottlecms-popform.js" type="text/javascript"></script>
    <script type="text/javascript">
        //初始化popform
        bottlecms.popform.init();

        // 上传头像
        function upphoto(pic) {
            $('.photo-previews').css('background-image', 'url(' + pic + ')');
            $('.bcui-upload-box .btn').css({
                background: '#EEE',
                color: '#999'
            }).text('重新上传');
            $('.photosubmitbox').show();
            $('input[name="photo"]').val(pic);
        }

        $('.uploadfileinfo').change(function (event) {
            var _this = this;
            var option = $(this).data();
            bottlecms.uploadfile({
                elem: this,
                data: option,
                success: function (pic) {
                    $(_this).prev('input').val(pic)
                    if (option.function) eval(option.function + "('" + pic + "')");
                    if (option.previews) $(option.previews).attr('src', pic);
                }
            })
        });

    </script>
    <script id="javascript-bottlecms-hammer" src="/m/js/hammer.min.js"
            type="text/javascript"></script>
    <script id="javascript-bottlecms-iscroll-zoom" src="/m/js/iscroll-zoom-min.js"
            type="text/javascript"></script>
    <script id="javascript-bottlecms-lrz-bundle" src="/m/js/lrz.all.bundle.js"
            type="text/javascript"></script>
    <script id="javascript-bottlecms-lrz-PhotoClip" src="/m/js/PhotoClip.js"
            type="text/javascript"></script>
    <script type="text/javascript">
        var loadingobj;
        var PhotoClipObj = new PhotoClip('#clipArea', {
            size: [260, 260],
            outputSize: 800,
            file: '.photo-file',
            view: '.photo-previews',
            ok: '#clipBtn',
            //img: 'img/mm.jpg',
            loadStart: function () {
                loadingobj = bottlecms.loading("载入中…");
                $(".clipbox").show();
                console.log('开始读取照片');

            },
            loadComplete: function () {
                loadingobj.close();
                console.log('照片读取完成');
                setTimeout(function () {
                    PhotoClipObj.scale(0);
                }, 100)
            },
            done: function (dataURL) {
                $(".clipbox").hide();
                $(".upfilebox .btn").text("重新上传");
                console.log(dataURL);
                uploadfilebase64(dataURL)
            },
            fail: function (msg) {
                bottlecms.toast(msg);
            }
        });


        $(document).on('click', '.clipbox .cancel', function (event) {
            event.preventDefault();
            $(".clipbox").hide();
        });


        function uploadfilebase64(file, refun) {
            var loadingobj = bottlecms.loading('上传中…');
            bottlecms.post("/m/ajax/common/upload_blob", {base64file: file, filedir: 'bc_head_img'}, function (rdata) {
                loadingobj.close();
                if (rdata.obj) {
                    updata_single_photo_fun(rdata.obj, function (data) {
                        bottlecms.toast("上传成功");
                        window.location.href = "/m/center";
                    });
                    refun && refun();
                } else {
                    bottlecms.toast("上传失败");
                }
            }, function (rerr) {
                loadingobj.close();
                bottlecms.toast(rdata.msg);
            })
        }


    </script>
</div>
</html>
